<template>
  <div>
    <el-form v-for="(value, key, index) of attrsObject" :key="index" 
    label-width="100px" label-position="right" @submit.native.prevent>
      <el-form-item :label="getAttrName(key)">
        <el-input-number v-if="isNumberType(key)" v-model="attrsObject[key]" 
        @change='handleValueChange'></el-input-number>
        <el-color-picker show-alpha v-else-if="isColorType(key)" v-model="attrsObject[key]" 
        @change='handleValueChange'></el-color-picker>
        <el-select v-else-if="isSelectType(key)" v-model="attrsObject[key]" 
        @change='handleValueChange'>
          <el-option v-for="(option, index) of getSelectOptions(key)" :key="index"
          :label="option.label" :value="option.value"></el-option>
        </el-select>
        <el-input v-else v-model="attrsObject[key]" @change='handleValueChange'></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ConfigUtil from '@/utils/graph-utils/configUtil.js'

export default {
  name: 'DynamicAttrsPanel',
  data() {
    return {
      form: {},
      attrsObject: {}
    }
  },
  methods: {
    isNumberType(name) {
      return ConfigUtil.isNumberAttrType(name)
    },

    isColorType(name) {
      return ConfigUtil.isColorAttrType(name)
    },

    isSelectType(name) {
      return ConfigUtil.isSelectAttrType(name)
    },

    getSelectOptions(name) {
      return ConfigUtil.getSelectOptions(name)
    },

    getAttrName(attr) {
      return ConfigUtil.getAttrName(attr)
    },

    handleValueChange() {
      this.$emit('attrsChanged', this.attrsObject)
    },

    setPanelInfos(attrsObject) {
      this.attrsObject = attrsObject || {}
    }
  }
}
</script>